<template>
  <div class="dynamic">
    <div class="topNav">
      <router-link to="/dynamic/main" :class="{car : type=='main'}">动态 <i></i></router-link>
      <router-link to="/dynamic/my" :class="{car : type=='my'}">与我有关的 <i></i></router-link>
    </div>
    <!--动态-->
    <ul class="dynamic-list" v-if="type=='main'">
      <li class="li">
        <div class="head c-testimg"></div>
        <div class="cont">
          <div class="dt">美少女战士</div>
          <div class="dd">季度里事过境迁蝴蝶终于蜕变，再没留恋谁的...</div>
          <div class="info">
            <span class="time">1小时前</span>
            <span class="name">一小群</span>
          </div>
        </div>
      </li>
      <li class="li">
        <div class="head c-testimg"></div>
        <div class="cont">
          <div class="dt">美少女战士</div>
          <div class="dd">季度里事过境迁蝴蝶终于蜕变，再没留恋谁的...</div>
          <div class="imgs">
            <span class="c-testimg"></span>
            <span class="c-testimg"></span>
            <span class="c-testimg"></span>
            <span class="c-testimg"></span>
          </div>
          <div class="info">
            <span class="time">1小时前</span>
            <span class="name">一小群</span>
          </div>
        </div>
      </li>
    </ul>

    <!--与我有关-->
    <div class="my" v-if="type=='my'">
      <router-link to="/like" class="like">
        <i class="icon-like"></i>
        收到的喜欢
        <div class="right"><i class="icon-arrow1"></i></div>
      </router-link>
      <ul class="lists">
        <li class="li">
          <div class="head c-testimg"></div>
          <div class="cont">
            <div class="dt">系统给你发了一条不知道什么鬼消息</div>
            <div class="info">
              <span class="time">2017/7/5 15:57</span>
              <span class="name">系统消息</span>
            </div>
          </div>
        </li>
        <li class="li">
          <div class="head c-testimg"></div>
          <div class="cont">
            <div class="dt">系统给你发了一条不知道什么鬼消息</div>
            <div class="info">
              <span class="time">2017/7/5 15:57</span>
              <span class="name">系统消息</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <my-Nav></my-Nav>
  </div>
</template>

<script>
    import myNav from '../components/nav.vue'
    export default {
        name: 'home',
        components:{
          myNav
        },
        data () {
            return {
                type : this.$route.params.type
            }
        },
        mounted (){

        },
        methods : {

        },
        beforeRouteUpdate (to, from, next) {
          next()
          this.type = this.$route.params.type;
        },
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../assets/css/common.scss";
  .dynamic{
    margin-top: rem(88);
    .topNav{
      height: rem(88);text-align: center;background-color: #fff;position: fixed;top: 0;width: 100%;max-width: $sreen;z-index: 9;
      &:before{@include border-half($border,'border-bottom');}
      a{display: inline-block;padding: 0 rem(26);font-size: rem(32);line-height: rem(45);margin-top: rem(18);color: $black-light;position: relative;
        &.car{color: $black-dark;
          i{display: block;}
        }
        i{display: none;width: rem(26);height: rem(6);position: absolute;left: 50%;margin-left: rem(-13);background-color: $blue;border-radius: 25%;bottom: rem(-8);}
      }
    }
  }
  .my{
    .like{height: rem(130);line-height: rem(130);padding-left: rem(54);font-size: rem(28);display: block;
      i{vertical-align: rem(-4);}
      .icon-like{margin-right: rem(46);font-size: rem(32);}
      .right{float: right;margin-right: rem(40);font-size: rem(32);
        i{color: $black-light;}
      }
    }
    .lists{
      background-color: #fff;
      .li{
        position: relative;padding: rem(30);@include border-half-all($border,'bottom');
        .head{width: rem(80);height: rem(80);border-radius: 6px;@include img-bg-show;float: left;}
        .cont{
          padding-left: rem(102);font-size: rem(28);
          .dt{height: rem(40);line-height: rem(40);white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
          .info{
            margin-top: rem(10);color: $black-light;overflow: hidden;font-size: rem(24);line-height: rem(30);
            .date{float: left;}
            .name{float: right;}
          }
        }
      }
    }
  }
</style>
